<%@ taglib prefix="maxlength" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Easy
  Date: 2017-09-27
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="row">
    <div class="col-md-12">

        <form  class="form-horizontal" id="editParkingZoneForm" >
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">名称</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="hidden" class="form-control" name="id" value="${parkingZone.id}"  >
                                        <input type="text" class="form-control" required name="name" value="${parkingZone.name}"  >
                                    </div>
                                    <span class="help-block">请输入分区名称</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">层数</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <select class="form-control" name="floor" id="floor">
                                            <c:forEach var="f" begin="1" end="${totalFloor}" step="1">
                                                <option value="${f}" <c:if test="${parkingZone.floor==f}">selected</c:if>>${f}层</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择层数</span>
                                </div>
                            </div>

                            <div  class="form-group">
                                <input type="hidden" name="imgId" class="img-id" value="${parkingZone.imgId}" />
                                <c:if test="${zoneUrl !=null && zoneUrl !=''}">
                                    <div class="layui-upload-drag" id="layui-upload-drag" style="border-color:#FFFAFA; background-color:#FFFAFA" onclick="chooseParkingZone()">
                                        <img style="max-width: 100%;height: 100%;" src="${zoneUrl}" class="img-parking" />
                                    </div>
                                </c:if>
                                <c:if test="${zoneUrl ==null || zoneUrl ==''}">
                                    <div class="layui-upload-drag" id="layui-upload-drag"  onclick="chooseParkingZone()">
                                        <i class="layui-icon fa fa-cloud-upload"></i>
                                        <p>点击上传停车场地图</p>
                                    </div>
                                </c:if>
                            </div>

                        </div>


                        <div class="col-md-6">

                            <div class="form-group">
                                <label class="col-md-3 control-label">停车场</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select class="form-control" required id="parkingId" name="parkingId" onchange="getFloor()">
                                            <c:forEach items="${parkingList}" var="item">
                                                <option value="${item.id}"  <c:if test="${parkingZone.parkingId==item.id}">selected</c:if>>${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <span class="help-block">请选择所属停车场</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" required  name="intro"  value="${parkingZone.intro}" >
                                    </div>
                                    <span class="help-block">请输入备注</span>
                                </div>
                            </div>

                            <div  class="form-group">
                                <input type="hidden" name="imgZone" class="img-id" value="${parkingZone.imgZone}" />
                                <c:if test="${lotUrl !=null && lotUrl !=''}">
                                    <div class="layui-upload-drag" id="layui-upload-zone"  style="border-color:#FFFAFA; background-color:#FFFAFA" onclick="chooseImgZone()">
                                        <img style="max-width: 100%;height: 100%;" src="${lotUrl}" class="img-parking" />
                                    </div>
                                </c:if>
                                <c:if test="${lotUrl ==null || lotUrl ==''}">
                                    <div class="layui-upload-drag" id="layui-upload-zone"  onclick="chooseImgZone()">
                                        <i class="layui-icon fa fa-cloud-upload"></i>
                                        <p>点击上传停车场分区车位地图</p>
                                    </div>
                                </c:if>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="panel-footer">
                    <button class="btn btn-default">清除</button>
                    <input type="button"class="btn btn-primary" onclick="edit()" value="修改">
                </div>
            </div>
        </form>

    </div>
</div>
<script>

    function parentSet(picture) {
        var id=picture.id;
        $(".img-id").val(picture.id);
        var imgDiv= $("#layui-upload-drag");
        imgDiv.empty();
        var img=document.createElement("img");
        img.className="img-parking";
        img.src=picture.src;
        img.setAttribute("max-width","100%");
        img.setAttribute("height","100%");
        img.onerror="${basePath}/static/img/head/default-head.jpg";
        imgDiv[0].appendChild(img);
        imgDiv.css("border-color" ,"#FFFAFA");
        imgDiv.css("background-color" ,"#FFFAFA");
    }

    function getFloor() {
        $("#floor").find("option").remove();
        var parkingId=$('#parkingId option:selected') .val();
        if(parkingId !=undefined  && parkingId !=0){

            $.ajax({
                type:"POST",
                url:"/car/parking/selectById",
                data:{"parkingId":parkingId},
                dataType:"json",
                success:function (data) {
                    for(var i=1; i<=data.floor; i++){
                        $("#floor").append('<option value="' + i + '">' + i+"层" + '</option>')
                    };
                }
            });
        }

    }

    function edit() {
        var param = serializeForm("editParkingZoneForm");
        var parkingId=$('#parkingId option:selected') .val();
        var floor=$('#floor option:selected') .val();
        var info=$("#info").val();
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: param +"&info=" + info+"&parkingId=" + parkingId+"&floor=" + floor,
            async: true,
            url: '/car/parkingZone/update',
            success: function (data) {
                if (data.success){
                    layer.msg(data.msg,{icon:1,time:1000},function () {
                        layer.close(top.layer_parkingZoneEdit);
                        reloadPage();
                    });
                }else{
                    layer.msg(data.msg,{icon: 2,time:1000});
                }
            },
            error: function () {
                alert("修改未成功")
            }
        })
    }

    function chooseImgZone() {
        layer.open({
            type: 2,
            title: "选择图片(双击选择图片)",
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['1045px','630px'],
            content: '/car/parkingZone/chooseImg',
        });
    }

    function  chooseParkingZone() {
        layer.open({
            id:'img-list',
            type: 2,
            title: "选择图片(双击选择图片)",
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['1045px','630px'],
            content: '/picture/chooseImg',
        });
    }

</script>
